<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% include "component/static_resource_css.html" %}
    <title>首页</title>
</head>
<body>
<div class="nk-container">

    {% include 'component/header.html' %}

    <!-- 内容 -->
    <div class="main">
        {% if tdy_hot %}
            <div class="container">
                今天大家都在聊：<a href="/search?keyword={{ tdy_hot | safe }}"><span
                    style="color: #ff6a46; font-size: 25px">{{ tdy_hot | safe }}</span></a>
            </div>
            <div style="padding-bottom: 20px"></div>
        {% endif %}

        {# 置顶帖 #}
        {% if posts_pin %}
            <div class="container">
                <div class="position-relative">
                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="bi bi-pin-fill"></i> 置顶帖</a>
                        </li>
                    </ul>
                </div>
                <ul class="list-unstyled">
                    {% for post in posts_pin %}
                        <li class="media pb-3 pt-3 mb-3 border-bottom">
                            <a href="/user/profile/{{ post.user_id }}">
                                <img src="{{ post.header_url }}" class="mr-4 rounded-circle" alt="用户头像"
                                     style="width:50px;height:50px;">
                            </a>
                            <div class="media-body">
                                <h6 class="mt-0 mb-3">
                                    <a href="/post/{{ post.id }}">{{ post.title }}</a>
                                    {% if post.type == 1 %}
                                        <span class="badge badge-secondary bg-danger"
                                              style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                                    {% endif %}
                                    {% if post.status == 1 %}
                                        <span class="badge badge-secondary bg-primary"
                                              style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                                    {% endif %}
                                </h6>
                                <div class="text-muted font-size-12">
                                    <u class="mr-3">
                                        <a href="/user/profile/{{ post.user_id }}">
                                            {{ post.username }}
                                        </a>
                                    </u><span
                                        class="mr-3">发布于</span><b>{{ post.create_time }}</b>
                                    <ul class="d-inline float-right">
                                        <li class="d-inline ml-2">
                                            <img class="like"
                                                 src="{{ "/static/img/like02.svg" if post.like== 1 else "/static/img/like01.svg" }}"
                                                 style="width:20px;height:20px;cursor: pointer;"
                                                 id="like_{{ post.id }}">
                                            <span>{{ post.like_count }}</span>
                                        </li>
                                        <li class="d-inline ml-2">|</li>
                                        <li class="d-inline ml-2">
                                            <img src="/static/img/comment.svg" style="width:20px;height:20px;">
                                            <span>{{ post.comment_count }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div style="padding-bottom: 20px"></div>
        {% endif %}
        {# 置顶帖end #}

        {# 推荐帖 #}
        {% if post_recommend %}
            <div class="container">
                <div class="position-relative">
                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="bi bi-hand-thumbs-up-fill"></i> 精品推荐</a>
                        </li>
                    </ul>
                </div>
                <ul class="list-unstyled">
                    {% for post in post_recommend %}
                        <li class="media pb-3 pt-3 mb-3 border-bottom">
                            <a href="/user/profile/{{ post.user_id }}">
                                <img src="{{ post.header_url }}" class="mr-4 rounded-circle" alt="用户头像"
                                     style="width:50px;height:50px;">
                            </a>
                            <div class="media-body">
                                <h6 class="mt-0 mb-3">
                                    <a href="/post/{{ post.id }}">{{ post.title }}</a>
                                    {% if post.type == 1 %}
                                        <span class="badge badge-secondary bg-danger"
                                              style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                                    {% endif %}
                                    {% if post.status == 1 %}
                                        <span class="badge badge-secondary bg-primary"
                                              style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                                    {% endif %}
                                </h6>
                                <div class="text-muted font-size-12">
                                    <u class="mr-3">
                                        <a href="/user/profile/{{ post.user_id }}">
                                            {{ post.username }}
                                        </a>
                                    </u><span
                                        class="mr-3">发布于</span><b>{{ post.create_time }}</b>
                                    <ul class="d-inline float-right">
                                        <li class="d-inline ml-2">
                                            <img class="like"
                                                 src="{{ "/static/img/like02.svg" if post.like== 1 else "/static/img/like01.svg" }}"
                                                 style="width:20px;height:20px;cursor: pointer;"
                                                 id="like_{{ post.id }}">
                                            <span>{{ post.like_count }}</span>
                                        </li>
                                        <li class="d-inline ml-2">|</li>
                                        <li class="d-inline ml-2">
                                            <img src="/static/img/comment.svg" style="width:20px;height:20px;">
                                            <span>{{ post.comment_count }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div style="padding-bottom: 20px"></div>
        {% endif %}
        {# 推荐帖end #}


        <div class="container">
            <div class="position-relative">
                <!-- 筛选条件 -->
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <a class="nav-link {{ "active" if order_mode == 0 }} chanle1" href="/index?orderMode=0"><i
                                class="bi bi-lightning"></i> 最新</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ "active" if order_mode == 1 }} chanle2" href="/index?orderMode=1"><i
                                class="bi bi-hand-thumbs-up"></i> 最热</a>
                    </li>
                </ul>
                {#                {% if  %}#}
                <a href="/post/publish">
                    <button type="button" class="btn btn-primary btn-sm position-absolute rt-0">
                        <i class="bi bi-plus-square"></i> 我要发布
                    </button>
                </a>
            </div>
            <!-- 帖子列表 -->
            <ul class="list-unstyled">
                <li class="media pt-3 mb-3 " style="flex-direction: column; height: 70px;justify-content: space-around">
                    <h6 style="padding: 0;margin: 0"><b class="square"></b> 本站总计 <i>{{ post_count }}</i>条PO</h6>
                    <h6 style="padding: 0;margin: 0"><b class="square"></b> 今日活跃 <i>{{ tdy_active }}</i>条PO</h6>
                </li>
                {% for post in post_all %}
                    <li class="media pb-3 pt-3 mb-3 border-bottom">
                        <a href="/user/profile/{{ post.user_id }}">
                            <img src="{{ post.header_url }}" class="mr-4 rounded-circle" alt="用户头像"
                                 style="width:50px;height:50px;">
                        </a>
                        <div class="media-body">
                            <h6 class="mt-0 mb-3">
                                <a href="/post/{{ post.id }}">{{ post.title }}</a>
                                {% if post.type == 1 %}
                                    <span class="badge badge-secondary bg-danger"
                                          style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                                {% endif %}
                                {% if post.status == 1 %}
                                    <span class="badge badge-secondary bg-primary"
                                          style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                                {% endif %}
                            </h6>
                            <div class="text-muted font-size-12">
                                <u class="mr-3">
                                    <a href="/user/profile/{{ post.user_id }}">
                                        {{ post.username }}
                                    </a>
                                </u><span
                                    class="mr-3">发布于</span><b>{{ post.create_time }}</b>
                                <ul class="d-inline float-right">
                                    <li class="d-inline ml-2">
                                        <img class="like"
                                             src="{{ "/static/img/like02.svg" if post.like== 1 else "/static/img/like01.svg" }}"
                                             style="width:20px;height:20px;cursor: pointer;"
                                             id="like_{{ post.id }}">
                                        <span>{{ post.like_count }}</span>
                                    </li>
                                    <li class="d-inline ml-2">|</li>
                                    <li class="d-inline ml-2">
                                        <img src="/static/img/comment.svg" style="width:20px;height:20px;">
                                        <span>{{ post.comment_count }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            {#    分页    #}
            {% include "component/pagination.html" %}
        </div>
    </div>
    {% include "component/footer.html" %}
</div>
{% include "component/static_resource_js.html" %}

<script src="/static/editor-md/lib/marked.min.js"></script>
<script src="/static/editor-md/lib/prettify.min.js"></script>
<script src="/static/editor-md/lib/raphael.min.js"></script>
<script src="/static/editor-md/lib/underscore.min.js"></script>
<script src="/static/editor-md/lib/sequence-diagram.min.js"></script>
<script src="/static/editor-md/lib/flowchart.min.js"></script>
<script src="/static/editor-md/lib/jquery.flowchart.min.js"></script>
<script src="/static/editor-md/editormd.min.js"></script>

<script>
    $(document).ready(function () {

        }
    );
    {#文章点赞功能#}
    $('.like').click(function () {
        var id = $(this).attr('id').split("_")[1];
        var abc = $(this)
        var data = {likeType: 1, postId: id};
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:5000/post/like",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            isCorrect: function () {
                alert("ok")
            },
            success: function (data) {
                if (data.data == 0) {
                    abc.attr('src', '/static/img/like01.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount - 1);
                    alert("取消点赞");
                } else {
                    abc.attr('src', '/static/img/like02.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount + 1);
                    alert("点赞成功");
                }
                if ((data.code + '')[0] != '2') {
                    alert("失败")
                    console.error(data.msg)
                    return
                }
            },
            error: function () {
                alert("未登录")
            },
        })
    })


</script>

</body>
</html>
